<template>
	<view>
		<view class="tabbar" :style="{ '--repeat': tabbar.length }">
			<view class="tabbar-nav">
				<view class="tabbar-nav-a" v-for="(item, index) in tabbar" :key="index"
					:class="pageIndex === index ? 'after' : ''" @click="tapTabbar(item, index)">
					<view class="after-icon" v-if="pageIndex === index">
						<uni-icons size="60rpx" color="#fff" :type="item.selectedIconPath"></uni-icons>
					</view>
					<uni-icons :type="item.iconPath" size="48rpx" v-else></uni-icons>
					<text class="text">{{ item.text }}</text>
				</view>
			</view>
			<view class="safeZone" :style="{ 'height': safeAreaInsetsBottom }"></view>
		</view>
		<view :style="{ 'height': tabbarHeight }"></view>
	</view>
</template>

<script>
	export default {
		name: "Tabbar",
		props: {
			pageIndex: {
				type: Number,
				default: 0,
			}
		},
		data() {
			return {
				tabbarHeight: '',
				safeAreaInsetsBottom: '',
				tabbar: [{
						iconPath: "home-filled",
						selectedIconPath: "home-filled",
						text: "首页",
						pagePath: "/pages/index/index"
					},
					{
						iconPath: "notification",
						selectedIconPath: "notification",
						text: "",
						pagePath: "/pages/rescue/rescue"
					},
					{
						iconPath: "person-filled",
						selectedIconPath: "person-filled",
						text: "我的",
						pagePath: "/pages/my/my"
					}
				],
			}
		},
		created() {
			uni.hideTabBar({
				animation: true
			});
			let res = uni.getWindowInfo().safeAreaInsets.bottom;
			this.safeAreaInsetsBottom = `${res * 2}rpx`;
			this.tabbarHeight = `${res + 50 * 2}rpx`;
		},
		methods: {
			tapTabbar(val, index) {
				uni.navigateTo({
					url: val.pagePath
				});
			},
			// tabbarStyle() {
			// 	return {
			// 		'grid-template-columns': `repeat(${this.tabbar.length}, 1fr)`
			// 	};
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.tabbar {
		--width: 100rpx;
		--height: 100rpx;
		--size: 60rpx;
		--color: red;
		--radius: 20rpx;
		--rgba: rgba(255, 255, 255, 0.95);
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 999;
	}

	.tabbar-nav {
		display: grid;
		grid-template-columns: repeat(var(--repeat, 4), 1fr);
		/* Default to 4 if --repeat is not set */
	}

	.tabbar-nav-a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		padding: 4rpx 0;
		position: relative;
		height: var(--height);
		background-color: var(--rgba);
		box-sizing: border-box;
		filter: drop-shadow(2rpx -2rpx 2rpx rgba(0, 0, 0, 0.1));
		font-size: 24rpx;
	}

	.tabbar-nav-a:nth-child(1) {
		border-top-left-radius: var(--radius);
	}

	.tabbar-nav-a:nth-last-child(1) {
		border-top-right-radius: var(--radius);
	}

	.after {
		background: radial-gradient(circle at center top,
				transparent var(--size), var(--rgba) 60%) center top;
	}

	.after-icon {
		width: var(--width);
		height: var(--height);
		background-color: var(--color);
		border-radius: 50%;
		position: absolute;
		left: 50%;
		top: 0;
		transform: translate(-50%, -50%);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.text {
	    font-family: Arial, "Microsoft YaHei", "Helvetica Neue", sans-serif;
	    color: #000;
	}


	.safeZone {
		background-color: var(--rgba);
	}
</style>